@layout("/common/_curd/_container.html"){
<style rel="stylesheet" type="text/css">
    .uploadWrapper{
        width: 100%;
        padding: 10px;
        border: 1px #dadada solid;
    }
    .uploadWrapper .selectFile,
    .uploadWrapper .fileItem .delBtn{
        padding: 5px 15px 5px 15px;
        border: 1px #c4c4c6 solid;
        border-radius: 5px;
        margin-right: 15px;
        background-color: #fff;
        cursor: pointer;
    }
    .uploadWrapper .fileShow{
        display: none;
    }
    .uploadWrapper .fileItem{
        width: 100%;
        display: flex;
        padding: 5px 0;
        text-align: center;
        border-bottom: 1px #dadada solid;
    }
    .uploadWrapper .fileItem span:not(.delBtn){
        flex: 1;
        margin-right: 15px;
    }
    .uploadWrapper .fileItem .delBtn{
        padding: 2px 15px 2px 15px;
        background-color: #fff;
        cursor: pointer;
        font-size: 12px;
    }
    .uploadWrapper .fileItem span.status{
        /*color: #449d44;*/
        font-size: 12px;
    }
    .uploadWrapper .selectFile:hover,
    .uploadWrapper .fileItem .delBtn:hover{
        background-color: #eee;
    }
    .uploadWrapper .uploadBtn{
        padding: 5px 15px 5px 15px;
        border: 1px #4cae4c solid;
        border-radius: 5px;
        margin-right: 15px;
        color: #fff;
        background-color: #5cb85c;
        cursor: pointer;
    }
    .uploadWrapper .uploadBtn:hover{
        background-color: #398439;
        border-color: #255625;
    }
</style>
    <!--<form enctype="multipart/form-data" method="post" name="scheme" action="/projects/view">-->
        <!--<input type="file"/>-->
        <!--<input type="submit" name="submit"/>-->
    <!--</form>-->
    <!--<form method="post" data-url="/projects/uploadScheme" enctype="multipart/form-data" >-->
        <div class="uploadWrapper">
            <label for="upload" class="selectFile">
                选择文件<input id="upload" style="display: none;" name="file" type="file" multiple="true" />
                <input type="hidden" name="id" value="${id}"/>
            </label>
            <span style="font-size: 14px;">提示：每个文件大小不超过10Mb，支持格式为*、*、*</span>

            <div class="fileShow">
                <ul style="list-style: none;width: 60%;" class="fileList">
                    <!--<li class="fileItem">
                        <span>XXXX.doc</span>
                        <span>0.15MB</span>
                        <span class="status">上传成功</span>
                        <span class="delBtn">删除</span>
                    </li>-->
                </ul>
                <button class="uploadBtn" id="uploadBtn">开始上传</button>
            </div>
        </div>


<form method="post" action="/projects/uploadScheme">
    <input type="text" name="id" value="${id}"/>
    <input type="text" id="uploadfiles" name="liuxiaobo" readonly="readonly" value=""/>
    <button class="uploadBtn" type="submit">提交</button>
</form>
        <!--<input type="submit" value="上传">-->
    <!--</form>-->
<script type="text/javascript">
    $(document).ready(function(){
        var upload = new UploadFile();
        upload.init();
        function UploadFile() {
            this.fileArr = [];
            this.uploadInput = $("#upload");
            this.fileShow = $(".fileShow");
            this.fileList = $(".fileShow > .fileList");
            this.uploadBtn = $("#uploadBtn");
            // 初始化
            this.init = function () {
                var _this = this;
                this.uploadInput.change(function () {
                    if(this.value){
                        this.files.length && _this.selectFile.call(_this,this.files);// 此处可以对文件个数作限制，默认不限制
                        this.value = "";
                        _this.uploadEvent.call(_this,_this.fileArr);
                    }
                });
            }
        }

        /**
         * 文件选择并缓存文件信息
         * fileArr  所选文件数组
         */
        UploadFile.prototype.selectFile = function (fileArr){
            var _this = this;
            [].slice.call(fileArr).forEach(function (val,index) {
                (function (i) {
                    var file = fileArr.item(i);
                    _this.fileArr.push(file);
                    _this.renderFile.call(_this,file,i);
                })(index);
            });
            this.delFile.call(this);
        }

        /**
         * 文件信息预览
         * file  文件
         */
        UploadFile.prototype.renderFile = function (file,index) {
            var htmlStr = "",
                maxSize = 10,// 支持文件最大10MB
                fileSize = file.size,// 文件大小
                filename = file.name,// 文件名字
                fileType = filename.split('.').pop();// 文件类型
            if(fileType){// 此处是文件类型，可以作对应的限制，例如 fileType==="png"
                if(fileSize <= maxSize*1024*1024){// 文件大小限制
                    var size = (fileSize/1024/1024).toFixed(2);
                    htmlStr = "<li class='fileItem'><span>"+filename+"</span><span>"+size+"MB</span><span class='status'>未上传</span><span class='delBtn'>删除</span></li>";
                    this.fileList.append(htmlStr);
                    index===0&&this.fileShow.show();
                }
            }
        }

        // 对所选文件进行删除(上传前)
        UploadFile.prototype.delFile = function () {
            var _this = this;
            $(".fileItem > .delBtn").on("click",function () {
                $(this).parents(".fileItem").remove();
                _this.fileArr.splice($(this).parents(".fileItem").index(),1);console.log(_this.fileArr);
            });
        }

        /**
         * 文件上传
         *  file   文件
         *  index  文件在缓存文件数组中的索引
         */
        UploadFile.prototype.uploadEvent = function (fileArr) {
            var _this = this;
            if(fileArr.length>0){
                this.uploadBtn.on("click",function () {
                    fileArr.forEach(function (val,index) {
                        var formdata = new FormData();
                        formdata.append("file",fileArr[index]);
                        $.ajax({
                            url:"${basePath}/myproject/view",
                            type:"POST",
                            data: formdata,
                            processData: false,
                            contentType: false,
                            success: function (res) {
                                if(res['flag'] === true ) {
                                    if(index === _this.fileArr.length-1){// 所有文件上传完成
                                        _this.fileArr = [];// 清空文件缓存数组
                                        _this.uploadBtn.hide();
                                        $("#uploadfiles").val(res.names);// 缓存文件名字
                                    }
                                    $(".fileItem").eq(index).find(".status").text("上传成功");
                                    $(".fileItem").eq(index).find(".status").css("color","#449d44");
                                }
                            }
                        });
                    });
                });
            }
        }
    });
</script>
@}
